/*
    地图界面
 */

import React from "react";
import { View, FlatList, RefreshControl, Dimensions } from "react-native";
import VisitData from "../module/VisitData";
import { NoVisitList, VisitList } from "./ItemListLayout";
import { BProps, BState, HeaderView, BaseComponent } from "../../index";
import EntityDetailPage from "../../EntityDetailPage";

interface IProps extends BProps {
  data?: any;
}

interface IState extends BState {
  isLoading: boolean;
}

export default class SchaduleVisitComponent extends BaseComponent<
  IProps,
  IState
> {
  visitData: VisitData;

  constructor(props: BProps) {
    super(props);
    this.state = {
      isLoading: false,
    };
    this.visitData = new VisitData("Visit");
    this.props.actions.init(this.props.componentId, this.visitData);
  }

  visitView = (data: [], showItemsLayout: object) => {
    if (data && data.length > 0) {
      //有值进行展示
      return (
        <FlatList
          keyboardShouldPersistTaps="always"
          style={{ flex: 1 }}
          data={data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item, index }) => {
            return this.listItem(item, index, showItemsLayout);
          }}
          refreshControl={
            <RefreshControl
              title={"加载中..."}
              colors={["red"]} //此颜色无效
              tintColor={"orange"}
              titleColor={"red"} //只有ios有效
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.props.actions.refreshData();
              }}
            />
          }
        />
      );
    } else {
      return (
        <NoVisitList
          componentId={this.props.componentId}
          actions={this.props.actions}
        />
      );
    }
  };

  listItem = (item: any, index: number, showItemsLayout: object) => {
    //根据业务类型的key获取对应数据
    let layouts = new Array();
    //线路数据集合
    layouts.push(
      <VisitList
        key={index.toString()}
        dataSource={item}
        showItems={showItemsLayout}
        actions={this.props.actions}
        componentId={this.props.componentId}
        visitData={this.visitData}
        openPlanDetail={this.openPlanDetail}
      />
    );
    return layouts;
  };

  openPlanDetail = (item: any) => {
    this.props.navigator &&
      this.props.navigator.push({
        component: EntityDetailPage,
        param: { ...item },
      });
  };

  render() {
    let data = this.props.state.getIn([
      "instances",
      this.props.componentId,
      "data",
    ]);
    let showItemsLayout = this.props.state.getIn([
      "instances",
      this.props.componentId,
      "moreItem",
    ]);
    return (
      <View style={{ flex: 1 }}>
        <HeaderView
          componentId={this.props.componentId}
          title={this.props.title ? this.props.title : "测试拜访"}
          navigator={this.props.navigator}
        />
        {this.visitView(data, showItemsLayout)}
      </View>
    );
  }
}
